import LayoutHeader from "@src/components/header"
import BottomNavigationBar from "@src/components/bottomNavigationBar"
import "./index.scss"
import {useLocation, useOutlet} from "react-router-dom";
import {AnimatePresence, motion} from "framer-motion";
import "swiper/swiper-bundle.css"
import {newsDataCreate} from "@src/store/newsData.ts";
import {messageAudioCreate} from "@src/store/messageAudio.ts"
import {useEffect} from "react";
import toast from "react-hot-toast";
import {socketCreate} from "@src/store/socket"

export default function HomePage() {
    const location = useLocation()
    const outletElement = useOutlet()
    const {socket,updateSocket} = socketCreate();
    const {
        updateFriendRequest,
        updateMyFriendRequest,
        newFriendRequestLength,
        setNewFriendRequestLength,
        AddNewMessageList
    } = newsDataCreate()
    const {informationCueAudio, messageAlertAudio} = messageAudioCreate()


    useEffect(() => {
        socket.emit('cookie:get');
        //收到新消息
        socket.on('private_message_hint', (data) => {
            toast(data.message);
            updateFriendRequest()
            updateMyFriendRequest()
            informationCueAudio.play().then()
            setNewFriendRequestLength(newFriendRequestLength + 1)
        });
        socket.on('cookie:update', (data) => {
            localStorage.setItem("cookie", data.data.cookie);
        });
        return () => {
            socket.off('private_message_hint');
            socket.close()
        };
    }, [socket]);

    useEffect(() => {
        socket.on('private_message', (data) => {
            if (location.pathname !== "/news/privateChat" && location.pathname !== "/chatRoom/chatRoomDetailed") {
                AddNewMessageList(JSON.parse(data.message))
                messageAlertAudio.play().then()
            }
        });
        return () => {
            socket.off('private_message');
        };
    }, [location.pathname, socket]);

    useEffect(() => {
        updateSocket()
        return () => {
            socket.close()
        }
    }, []);


    return (
        <div className="HomeLayout">
            <LayoutHeader></LayoutHeader>
            <div className="content">
                <AnimatePresence mode="wait">
                    {outletElement && (
                        <motion.div
                            key={location.pathname}
                            initial={{opacity: 0, translateY: "30px"}} // 初始状态：透明且从下方50px位置开始
                            animate={{opacity: 1, translateY: "0px"}} // 进入动画：淡入并滑到原位
                            exit={{opacity: 0, translateY: "30px"}} // 退出动画：淡出并滑回下方50px
                            transition={{duration: 0.3, ease: "easeInOut"}} // 动画持续时间和缓动函数
                            className="centered"
                        >
                            {outletElement}
                        </motion.div>)}
                </AnimatePresence>
            </div>
            <BottomNavigationBar></BottomNavigationBar>
        </div>

    )
}


